<template>
	<view>
		<view v-if="loading">
			<loading></loading>
		</view>
		<view v-else class="container">
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index" >
					<view :class="{'active':isActive == index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="nav_item" v-if="isActive==0">
				<view v-if="firstLoad">
					<loading></loading>
				</view>
				<view v-else>
					<view  v-if="list.length > 0" >
						<view class="exam-list" v-for="(item,index) in list" :key="index"  @click="toDetail(item)">
							<text>{{item.examinationName}}</text>
							<text> {{item.createTime}}</text>
							<text :class="item.score < item.passScore?'false':'true' ">{{item.score == null?'中途退出':item.score + '分'}}</text>
							<text>详情</text>
						</view>
						<view class="load-more">
							<uni-icons v-if="loadShow" type="spinner-cycle" size="30"></uni-icons>
							<text  v-if="botShow">已经到底了</text>
						</view>
					</view>
					<view v-else >
						<isEmpty empty-text="暂无数据"></isEmpty>
					</view>
				</view>
					
					
			</view>
			<view class="nav_item" v-if="isActive==1">
				<view v-if="firstLoad">
					<loading></loading>
				</view>
				<view v-else>
					<view  v-if="list.length > 0" >
						<view class="exam-list" v-for="(item,index) in list" :key="index"  @click="toDetail(item)">
							<text>{{item.examinationName}}</text>
							<text > {{item.createTime}}</text>
							<text :class="item.score < item.passScore?'false':'true' ">{{item.score == null?'中途退出':item.score + '分'}}</text>
							<text>详情</text>
						</view>
						<view class="load-more">
							<uni-icons v-if="loadShow" type="spinner-cycle" size="30"></uni-icons>
							<text  v-if="botShow">已经到底了</text>
						</view>
					</view>
					<view v-else >
						<isEmpty empty-text="暂无数据"></isEmpty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import isEmpty from '@/components/isEmpty/isEmpty'
		import {getExamRecord,getExamTypeCount} from '@/api/exam/exam'
		import {parseTime } from '@/utils/ruoyi'
		import loading from '@/components/loading/loading'
	export default {
		components: {
			isEmpty //注册子组件
		},
		data() {
			return {
				list:[],
				isActive: 0,
				navList:[
					{
						index: 0,
						title: '模拟考试'
					},{
						index: 1,
						title: "正式考试"
					}
				],
				pageForm:{
					pageNo:1,
					pageSize:10,
					studentId:uni.getStorageSync('studentId'),
					type:this.isActive
				},
				loadShow:false,
				botShow:false,
				loading:true,
				firstLoad:false,
			}
		},
		created() {
			this.getList();
			this.getCount()
		},
		onLoad(e) {
			this.isActive = e.type
		},
		onReachBottom(){
			if(!this.botShow){
				this.loadShow = true
				this.pageForm.pageNo ++ ;
				this.getList()
			}
		},
		onBackPress(event){
			// uni.navigateBack({
			//     delta: 5
			// });
		},
		
		methods: {
			checked(index) {
				this.firstLoad = true
				this.isActive = index
				this.botShow = false
				this.pageForm.type = this.isActive
				this.pageForm.pageNo = 1
				this.list = []
				this.getList()
			},
			getCount(){
				let data ={
					studentId:uni.getStorageSync('studentId'),
				}
				getExamTypeCount(data).then(res =>{
					this.navList =[
						{
							index: 0,
							title: '模拟考试（' + res.data.formalCount + '次）'
						},{
							index: 1,
							title: '正式考试（' + res.data.analogCount + '次）'
						}
					]
				})
			},
			getList(){
				this.pageForm.type = this.isActive
				getExamRecord(this.pageForm).then(res => {
					if( res.data.list.length > 0){
						for (let i = 0; i <  res.data.list.length; i++) {
							 res.data.list[i].createTime = parseTime( res.data.list[i].createTime,'{y}/{m}/{d}')
						}
						this.list.push(...res.data.list)
						this.loadShow = false
					}else{
						this.loadShow = false
						this.botShow = true
					}
					this.loading = false
					this.firstLoad = false
					// this.list = res.data.list
					
					// console.log(this.list)
					// for (let i = 0; i < this.list.length; i++) {
					// 		this.list[i].creatTime = parseTime(this.list[i].creatTime,'{y}-{m}-{d}')
					// }
				}).catch(() =>{
					
				})
			},
			toDetail(e) {
				this.$tab.navigateTo('/pages/exam/detail?id=' + e.id )	
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #FFFFFF;
	}
	.container{
		width: 100%;
		background: #FFFFFF;
		min-height: 650px;
		.tab_nav{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 40px;
			.navTitle {
				height: 90rpx;
				line-height: 90rpx;
				width: 100%;
				text-align: center;
				font-size: 14px;
				font-family: Inter-Bold, Inter;
				font-weight: bold;
				color: #333;
			}
		}
		.active {
			position: relative;
			color: #FF9A50;
		}
		.active::after {
			content: "";
			position: absolute;
			width: 40px;
			height: 8rpx;
			background-color:  #FF9A50;
			border-radius: 2px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			margin: auto;
		}
		.nav_item{
			padding: 30rpx;
			.exam-list{
				display: flex;
				background: #FFFFFF;
				border-bottom: 1px solid #F0F0F0;
				padding: 30rpx 0;
				align-items: center;
				flex-wrap: nowrap;
				margin-top: 30rpx;
				text{
					display: inline-block;
					text-align: center;
					overflow: hidden;
				}
				text:first-child{
					width: 40%;
				}
				text:nth-child(2){
					width: 25%;
				}
				text:nth-child(3){
					width: 20%;
				}
				text:nth-child(4){
					width: 15%;
				}
				.false{
					color:#F26D6D ;
				}
				.true{
					color: #508CFF;
				}
			}
		}
		.load-more{
			display: block;
			padding: 20px;
			margin: 0 auto;
			text-align: center;
		}
		
	}

</style>